iT邦幫忙

2022 iThome 鐵人賽

DAY 20
0
自我挑戰組

Asp.Net Core 零基礎建立自己的Blog系列 第 20

[Day 20] 文章優化,加上程式碼Highlight.js 和 css

  • 分享至 

  • xImage
  •  

前面部分如果都完成了,首頁進來就會看到條列式的文章標題可以點進首頁連結,就會進入到文章裡面內容頁了。
(紅色圈起來的地方)
https://ithelp.ithome.com.tw/upload/images/20221002/20125853va3eyqCQDD.png

這邊是所有工程師最需要的功能,blog裡面有程式碼Highlight(下圖),這邊是用一個第三方套件去做的。直接把連結給你們。
程式碼Highlight的套件。
//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/ir-black.min.css
//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js
https://ithelp.ithome.com.tw/upload/images/20221002/20125853eKf1axbNYJ.jpg

步驟:

step1.ArticleController先加上index 這個action

[HttpGet("Article/{id}")]
        public async Task<IActionResult> Index(long id)
        {
            var model = await _article.GetArticle(id);
            var result = new ArticleViewModel();

            if (model is not null && model.Count > 0)
            {
                result = model.Select(x => new ArticleViewModel
                {
                    Id = x.Id,
                    ArticleContent = x.ArticleContent,
                    Title = x.Title
                }).First();

                return View(result);
            }

            return Redirect("/");
        }

step2. 創建出Index.cs 完整程式碼
以下複製到對的位置。
//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/ir-black.min.css
//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js

@model ArticleViewModel
@section styles {
  <link rel="stylesheet" href="~/css/article.css?@DateTime.Now.ToString("yyyyMMddhhmmss")">
  <link rel="stylesheet"  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/ir-black.min.css">
}

<div class="mb-2" style="width:700px; margin-left: auto;margin-right: auto;">
    <h1 class="text-center display-4 mb-5">@Model.Title</h1>
    @Html.Raw(Model.ArticleContent)
</div>
@section Scripts {
      <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
      <script>hljs.initHighlightingOnLoad();</script>
}

成功以後,新增程式碼相關的訊息就會看到,文章內容會有highlight的效果了。


上一篇
[Day 19] .Net Core MVC Ajax 動態新增html - 載入更多文章功能 (二)
下一篇
[Day 21] PartialView的應用 - 把首頁文章列表弄成一個模組
系列文
Asp.Net Core 零基礎建立自己的Blog30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言